<template>
  <div class="nearby">
    <Nav backTitle="全部校区" />
    <div class="campus-list">
      <ul>
        <li
          v-for="item in campusList"
          :key="item.campusId"
        >
          <h4>
            {{item.campusName}}
            <span
              @click="handleCourse(item)"
              class="btn"
            >查看课程</span>
          </h4>
          <p
            class="location"
            @click="handleLocation(item)"
          >
            <img src="../assets/img/location-blue.png">{{item.address}}&nbsp;&nbsp;&nbsp;
            <span class="distance">距离您{{item.distance | formatNumber(0)}}m</span>
          </p>
          <p>
            <img src="../assets/img/phone-blue.png">
            <a
              class="phone"
              :href="'tel:' + phone"
              v-for="(phone,index) in item.phoneNo.split('，')"
              :key="index"
            >
              {{phone}}
            </a>
          </p>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import api from 'util/xhr'
import Nav from 'components/nav/nav.vue'
import global from 'util/global'
import conf from 'conf/index'

export default {
  components: {
    Nav
  },
  data() {
    return {
      title: '提示',
      campusList: []
    }
  },
  mounted() {
    if (!sessionStorage.getItem('city')) {
      global.getCurrentPosition(() => {
        this.init()
      })
    } else {
      this.init()
    }
  },
  methods: {
    handleCourse(item) {
       window.location.href = `${conf.netSignUp}/yuyou/campus_${item.campusId}/courses`
    },
    handleLocation(item) {
      this.$router.push(
        '/location?location=' +
          JSON.stringify({
            campusId: item.campusId,
            campusName: item.campusName,
            address: item.address.replace('&', ' '),
            geoLocation: item.geoLocation,
            province: item.province,
            city: item.city,
            district: item.district,
            distance: item.distance
          })
      )
    },
    init() {
      // 附近距离
      var DISTANCE = 5000
      var longitude = sessionStorage.getItem('longitude')
      var latitude = sessionStorage.getItem('latitude')
      var areaTeamId = sessionStorage.getItem('globalAreaTeamId')
      //jw 改
      api
        .post('/api/m/findCampusByAreaTeamId', {
          longitude: longitude,
          latitude: latitude,
          areaTeamId: areaTeamId || '564701030634225664'
        })
        .then(data => {
          this.campusList = data
        })
    }
  }
}
</script>

<style lang="less" scoped>
.nearby {
  background: #f8f8f8;
  height: 100%;
  overflow-y: scroll;
}
.campus-list {
  font-size: 28px;
  padding-top: 130px;
}
.campus-list li {
  padding: 36px 32px;
  width: 702px;
  margin: 0 auto 30px auto;
  background-color: #fff;
}

.campus-list li h4 {
  font-size: 28px;
  margin-bottom: 15px;
  margin-left: 30px;
  display: flex;
  justify-content: space-between;
}

.btn {
  font-size: 24px;
  color: #3271f1;
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #3271f1;
  border-radius: 12px;
}

.campus-list li p.location {
  line-height: 1.5;
  // margin-bottom: 1rem;
}

.campus-list li p {
  position: relative;
  margin-left: 30px;
}

.campus-list li p img {
  position: absolute;
  left: -30px;
  top: 10px;
  width: 24px;
}

.campus-list li .distance {
  color: #ee0000;
  font-size: 20px;
}

.phone {
  display: inline-block;
  /* width: 100%; */
  color: #333;
}
.phone + .phone {
  // margin-left: 2rem;
}
</style>